
<template>
  <el-upload
    ref="upload"
    class="upload-demo"
    accept=".jpg, .jpeg, .png"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :on-change="uploadFile"
    multiple
    :limit="rules.maxSize"
    :on-exceed="handleExceed"
    v-model:file-list="fileList"
    list-type="picture-card"
    :auto-upload="false"
  >
    <el-icon>
      <Plus/>
    </el-icon>
    <!-- <el-button size="small" type="primary">点击上传</el-button>
    <div class="el-upload__tip">只能上传 jpg/png 文件，且不超过 10MB</div>-->
  </el-upload>
  <el-image-viewer
    hide-on-click-modal
    @close="()=>{showViewer = false}"
    v-if="showViewer && viewFileList.length>0"
    :url-list="viewFileList"
    :initial-index="initialIndex"
  />
</template>
    
<script>
export default {
  props: {
    rules: {
      type: [Object, Function],
      default: () => ({
        maxSize: 1
      })
    },
    imageFileList:{
      type:Array,
      default:()=>[]
    }
  },
  computed: {},
  watch:{
    imageFileList:{
      immediate:true,
      deep:true,
      handler(val){
        this.fileList = val
      }
    }
  },
  data() {
    return {
      viewFileList: [],
      showViewer: false,
      initialIndex: 0,
      fileList: [],
    };
  },
  methods: {
    clearFileList(){
      this.fileList = []
    },
    handleRemove() {
      this.$refs.upload.clearFiles();
    },
    handlePictureCardPreview(file) {
      this.viewFileList = [];
      this.viewFileList.push(file.url);
      this.showViewer = true;
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 ${this.rules.maxSize} 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    uploadFile(param) {
      const file = param;
      let extension = file.name.substr(file.name.lastIndexOf(".") + 1);
      const whiteList = ["jpg", "jpeg", "png"];
      if (whiteList.indexOf(extension.toLowerCase()) === -1) {
        this.$message({
          messgae: "请上传jpg,jpeg,png类型",
          type: "warning"
        });
        return false;
      }
      const is10MB = file.size / 1024 / 1024 < 10;
      if (!is10MB) {
        this.$message({
          messgae: "上传大小不能超过10MB",
          type: "warning"
        });
        return false;
      }
      this.fileList.push({
        name: file.name,
        url: file.url
      });
      this.$emit("setForm", file);
    }
  }
};
</script>
<style lang="scss" scoped>
.upload-imgs-container {
  display: flex;
  flex-wrap: wrap;

  &:focus {
    outline: none;
  }

  .upload-item,
  .thumb-item {
    border-radius: 3px;
    transition: all 0.1s;
    color: #666666;
    margin-right: 1em;
    margin-bottom: 1em;
    position: relative;
    &.disabled {
      color: #ababab;
    }

    &:not(.disabled):hover {
      border-color: #3963bc;
      color: #3963bc;
    }
  }

  .thumb-item {
    :v-deep(.el-image-viewer__canvas) {
      position: absolute;
      max-width: 800px;
      left: 50%;
      transform: translateX(-50%);
    }
    .info {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      transition: all 0.3s;
      transition-delay: 0.1s;

      .wait-upload {
        background: #ffcb71;
        color: white;
        position: absolute;
        display: inline-block;
        width: 1.7em;
        height: 1.5em;
        top: 0;
        right: 0;
        border-radius: 0 0 0 1.4em;
        transition: all 0.1s;

        &::before {
          font-size: 1.4em;
          position: absolute;
          right: -1px;
          transform: scale(0.7);
        }
      }
    }

    .control {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 0;
      background-color: rgba(0, 0, 0, 0.3);
      transition: all 0.3s;
      transition-delay: 0.1s;

      .del {
        background: #f4516c;
        color: white;
        position: absolute;
        display: inline-block;
        width: 1.7em;
        height: 1.5em;
        top: 0;
        right: 0;
        opacity: 0;
        border-radius: 0 0 0 1.4em;
        transition: all 0.1s;

        &::before {
          font-size: 1.4em;
          position: absolute;
          right: -1px;
          transform: scale(0.7);
        }

        &:hover {
          transform: translate(-0.5em, 0.4em) scale(1.5);
        }
      }

      .preview {
        color: white;
        font-size: 2em;
        transition: all 0.2s;

        &:hover {
          transform: scale(1.2);
        }
      }

      .control-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        color: white;
        background-color: rgba(0, 0, 0, 0.3);
        font-size: 1.5em;
        display: flex;
        justify-content: space-around;
        transform: translate(0, 100%);
        transition: all 0.2s;
        transition-delay: 0.1s;
        padding: 5px 0;

        .control-bottom-btn {
          transform: all 0.2s;

          &.disabled {
            color: #ababab;
            cursor: not-allowed;
          }

          &:not(.disabled):hover {
            transform: scale(1.2);
          }
        }
      }
    }

    &:hover {
      .control {
        opacity: 1;
      }

      .del {
        opacity: 1;
      }

      .control-bottom {
        transform: translate(0, 0);
      }
    }
  }

  .upload-imgs__input {
    display: none;
  }
}
</style>


    